// var webpack = require("webpack");
const path = require("path");
// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象

// const webpack = require('webpack');//要用定义在webpack.config.js的热更新要引入webpack并且在plugins（配置插件的节点，一个数组）中加入热更新对象
//自动在内存中根据指定页面生成一个内存的页面，自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin'); 

module.exports = {

    mode:'development',
    
    // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, "./src/main.js"), // 入口，表示，要使用 webpack 打包哪个文件
    output: {
        // 输出文件相关的配置
        path: path.join(__dirname, "./dist"), // 指定 打包好的文件，输出到哪个目录中去
        filename: "bundle.js", // 这是指定 输出的文件的名称
    },
    // devServer: {
    //     open: true,//自动打开浏览器
    //     port: 3000,//设置运行端口
    //     contentBase: "src",//指定托管的根目录
    //     hot: true//启用热更新
    // },
    // plugins: [//配置插件的节点
    //     new webpack.HotModuleReplacementPlugin() //new 一个热更新的模块对象

    // ]
    plugins: [
        new htmlWebpackPlugin({//创建一个在内存中生成HTML，页面的插件
            template: path.resolve(__dirname, './src/index.html'),//模板指定页面路径生成页面
            filename: 'index.html'//自动生成的HTML文件的名称
        }),
        new VueLoaderPlugin()

    ],
    module: { // 这个节点，用于配置 所有 第三方模块 加载器 
        rules: [ // 所有第三方模块的 匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//,  配置处理 .css 文件的第三方loader 规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则    ] 
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
            { test:/\.jpg|png|gif|bmp|jpeg$/i,use:'url-loader?esModule=false'},// 配置处理 图片路径的 第三方 loader 规则
            { test:/\.ttf|eot|svg|woff|woff2$/,use:'url-loader'},// 配置处理 图片路径的 第三方 loader 规则
            { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
            { test:/\.vue$/,use:'vue-loader'},//配置.vue
        ]
    }

};
